<template>
  <div class="bg-white">
    <div class="sticky top-0 z-20 bg-white p-0.1 shadow-sm shadow-black-500/40">
      <div class="flex h-10 text-base text-gray-500 items-center m-4">
        <div class="tab mr-8 relative text-black text-xl font-bold show">推广奖励</div>
      </div>
      <div class="mx-2">
        <div class="bg-gray-50 rounded-lg px-3 h-35 flex justify-around items-center shadow-xs shadow-black-500/40">
          <div class="flex justify-center flex-col items-center">
            <div class="text-sm text-stroke-light-400 mb-2">已结算收益(元)</div>
            <nut-price :price="(summary?.hasSettlePrice ?? 0) / 100" size="large" :need-symbol="false" :style="{ color: '#000' }" />
          </div>
          <div class="h-2/5 w-0.5 bg-light-500"></div>
          <div class="flex justify-center flex-col items-center">
            <div class="text-sm text-stroke-light-400 mb-2">待结算收益(元)</div>
            <nut-price :price="(summary?.notSettlePrice ?? 0) / 100" size="large" :need-symbol="false" :style="{ color: '#000' }" />
          </div>
        </div>
      </div>

      <div class="flex mx-3 my-3">
        <div class="text-gray-500">结算状态：</div>
        <div
          v-for="(item, index) in statusList"
          :key="index"
          class="text-black text-xs bg-light-700 py-1 px-3 rounded-xl text-center mr-3"
          :class="[index === settleStatus ? 'bg-orange-100 text-orange-600' : '']"
          @click="changeSettleStatus(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <div v-if="performanceDetail.length">
      <nut-infinite-loading v-model="moreLoading" :has-more="hasMore" @load-more="loadMore" :threshold="500">
        <div>
          <div
            class="p-3 text-gray-400 text-sm relative border-b-1 border-light-700 last:border-b-0 bg-white rounded-lg"
            v-for="(item, index) in performanceDetail"
            :key="index"
          >
            <div class="text-base c-gray-9 mb-1 text-ellipsis overflow-hidden w-10/11 whitespace-nowrap">
              {{ item.skuName }}
            </div>
            <div class="mb-1">订单号：{{ item.trainOrderId }}</div>
            <div class="mb-1">下单时间：{{ dayjs(item.trainOrderCreateTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
            <div class="mb-1">订单总价：￥{{ item.orderPrice / 100 }}</div>
            <div>购买者：{{ item.nickname }}</div>
            <div class="absolute right-3 top-3">
              <nut-tag :color="checkoutOrderStatus(item.status).tag.color" :textColor="checkoutOrderStatus(item.status).tag.textColor">{{
                checkoutOrderStatus(item.status).text
              }}</nut-tag>
            </div>
            <div class="absolute right-3 bottom-2 text-lg text-green-6">+￥{{ item.checkoutAmount / 100 }}</div>
          </div>
        </div>
      </nut-infinite-loading>
    </div>
    <div v-else class="fixed inset-0 flex justify-center items-center">
      <nut-empty description="无数据"></nut-empty>
    </div>
  </div>
</template>

<script lang="ts">
const checkoutOrderStatus = (status: CheckoutOrderStatus) =>
  ({
    1: {
      text: "待结算",
      tag: {
        color: "#FF9900",
        textColor: "#FFFFFF",
      },
    },
    2: {
      text: "已结算",
      tag: {
        color: "#4fc08d",
        textColor: "#FFFFFF",
      },
    },
  })[status];
</script>

<script setup lang="ts">
import * as checkoutOrderApi from "@/api/train/checkout-order";
import dayjs from "dayjs";
import _ from "lodash";
import "@nutui/nutui/dist/packages/toast/style";

const statusList = ["全部", "未结算", "已结算"];

const params = reactive<Parameters<typeof checkoutOrderApi.getMyPerformanceDetailPage>[0]>({
  pageNo: 1,
  pageSize: 10,
  // status: null,
  // checkoutType: "SALE",
});
const total = ref<number | null>(null);

// 加载中
const moreLoading = ref(false);

// 是否有更多
const hasMore = computed(() => {
  if (total.value === null) return true;
  const { pageNo, pageSize } = params;
  return pageNo * pageSize < total.value;
});

const performanceDetail = ref<MyCheckoutOrderDetailRespVO[]>([]);
// 加载数据函数
const loadData = _.debounce((params: Parameters<typeof checkoutOrderApi.getMyPerformanceDetailPage>[0]) => {
  moreLoading.value = true;
  checkoutOrderApi.getMyPerformanceDetailPage(params).then((res) => {
    const { list, total: remoteTotal } = res.data;
    total.value = remoteTotal;
    if (params.pageNo > 1) {
      // 下一页
      performanceDetail.value.push(...list);
    } else {
      // 新的加载
      performanceDetail.value = list;
    }
    moreLoading.value = false;
  });
}, 300);
// 参数变动，自动重新加载
watch(params, loadData);

// 初始化加载
loadData(params);

const summary = ref<MyCheckoutOrderSummaryRespVO | null>(null);
checkoutOrderApi.getMySummary().then((res) => (summary.value = res.data));

// 切换结算状态选项
const settleStatus = ref(0);
const changeSettleStatus = async (index: number) => {
  params.status = (index as 0 | 1 | 2) || undefined;
  settleStatus.value = index;
  window.scrollTo(0, 0);
};

const loadMore = async () => {
  params.pageNo++;
};
</script>

<style lang="scss" scoped>
.tab {
  transition: all 0.3s ease-in-out;

  &:after {
    position: absolute;
    content: "";
    left: 100%;
    right: 100%;
    height: 0.2rem;
    bottom: -0.5rem;
    background-color: rgb(96, 165, 250);
  }

  &.show {
    &:after {
      left: 25%;
      right: 25%;
    }
  }
}
</style>
